<template>
	<view class="contain">
		<view class="bg">
			<view class="backgroundBanner">
				<view class="banner">
					<swiper :duration="500" circular="true" indicator-active-color="#fff" easing-function="true"
						indicator-dots='true'>
						<swiper-item v-for="(item, index) in arr.urlArray" :key="index">
							<img :src="item"></img>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="productNameBox">
				<view class="productNameLeft">
					<view class="productName">
						{{arr.title}}
					</view>
					<view class="productDes">
						{{arr.timeText3}}
					</view>
				</view>
				<view class="share">
					<img src="../../static/share.png" />
					<view>分享</view>
				</view>
			</view>
			<view class="priceBox">
				<view class="price">
					<span class="unit">¥</span>{{arr.price}}
				</view>
				<view class="priceOfVip">
					<span class="unit">¥</span>{{arr.oldprice}}
				</view>
				<view class="vipTip">
					<img src="../../static/vip.png" />
					会员价
				</view>
				<view class="integralTip">
					赠送积分
				</view>
			</view>
			<view class="openVip">
				<view class="left">
					<img src="../../static/vip.png" />
					开通超级会员，一年预计可省999元
				</view>
				<view class="right">
					<a href="">立即开通</a>
				</view>
			</view>
		</view>
		<view class="medium bg">
			<view class="item">
				<view class="title">
					积分
				</view>
				<view class="content">
					购买本商品可获得100积分
				</view>
				<view class="rightNav">
					<img src="../../static/in.png" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					服务
				</view>
				<view class="content">
					<view class="contentTips">
						<img src="../../static/check.png" />
						极速配送
					</view>
					<view class="contentTips">
						<img src="../../static/check.png" />
						退款保证
					</view>
					<view class="contentTips">
						<img src="../../static/check.png" />
						品控质检
					</view>
				</view>
				<view class="rightNav">
					<img src="../../static/in.png" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					评分
				</view>
				<view class="content">
					<view class="contentTips">
						<img v-for="(item,index) in product.score" :key="index" src="../../static/score_full.png" />
						<img v-for="(item,index) in (5-product.score)" :key="index"
							src="../../static/score_empty.png" />
						4.0
					</view>
					<view class="contentTips">
						月销量 {{product.saleNumMonth}}
					</view>
					<view class="contentTips">
						总销量 {{product.saleNumTotal}}
					</view>
				</view>
				<view class="rightNav">
					<img src="../../static/in.png" />
				</view>
			</view>
		</view>
		<view class="detal bg">
			<img v-for="(item,index) in arr.urlArray" :key="index" :src="item" />
		</view>
		<view class="butBox">
			<view class="pay">
				<view class="left">
					<view class="item" @tap=fun2(arr)>
						<view class="imgBox">
							<img src="../../static/cart.png" />
						</view>
						<view class="text">
							购物车
						</view>
					</view>
					<view class="item">
						<view class="imgBox">
							<img src="../../static/collect.png" />
						</view>
						<view class="text">
							收藏
						</view>
					</view>
					<view class="item">
						<view class="imgBox">
							<img src="../../static/service.png" />
						</view>
						<view class="text">
							客服
						</view>
					</view>
				</view>
				<view class="right">
					<view class="addCartBut" @tap=addCar(arr)>
						加入购物车</view>
					<view class="payBut" @tap="openPayModal">
						立即购买
					</view>
				</view>
			</view>
		</view>

		<view class="payModal" v-if="showPayModal" @click.stop="openPayModal">
			<view class="top">
				<view class="hidden">
					<img v-for='item,index in arr.urlArray' :class=" active==index?'typeItemActive':''" :key='index'
						:src="item" alt="">
				</view>
				<view class="nameBox">
					<view class="name">
						{{arr.title}}
					</view>
					<view class="des">
						{{arr.timeText3}}
					</view>
					<view class="price">
						<span class="priceActive">¥{{arr.price}}</span>
						<span class="originalPrice">¥{{arr.oldprice}}</span>
					</view>
				</view>
				<view class="close" @click.stop="closePayModal">
					<img src="../../static/close.png" />
				</view>
			</view>
			<view class="type">
				<view v-for="(item1,index1) in arr.types" :key="index1">
					<view class="title">
						{{item1.name}}
					</view>
					<view class="typeItemBox">
						<view v-for="(item2,index2) in item1.items" :key="index2"
							:class="'typeItem '+(typeIdArr[index1] === item2.id?'typeItemActive':'')"
							@click="selType(index1,item2)">
							{{item2.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="numBox">
					<view class="but" @click="subNum">
						-
					</view>
					<input class="uni-input" type="number" v-model="payNum" />
					<view class="but" @click="addNum">
						+
					</view>
				</view>
				<view class="payBut">
					立即购买
				</view>
			</view>
		</view>
		<view class="payModalClose" v-if="showPayModal" @click="closePayModal"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPayModal: false,
				typeIdArr: [1, 1],
				payNum: 1,
				product: {
					originalPrice: 39,
					priceOfVip: 19,
					score: 4,
					saleNumMonth: 1000,
					saleNumTotal: 1000,
					detailImgList: ['../../static/lunbo1.jpg', '../../static/lunbo2.jpg', '../../static/lunbo3.png',
						'../../static/lunbo4.jpg'
					],

				},
				arr: [],
				active: '',
			}
		},
		methods: {
			openPayModal() {
				this.showPayModal = true;
			},
			closePayModal() {
				this.showPayModal = false;
			},
			selType(index, item) {
				let typeIdArr = this.typeIdArr;
				typeIdArr[index] = item.id;
				this.typeIdArr = [];
				this.typeIdArr = typeIdArr;
			},
			subNum() {
				if (this.payNum > 1) {
					this.payNum--;
				} else {
					this.payNum = 1;
				}
			},
			addNum() {
				this.payNum++;
			},
			//购物车
			fun2(arr) {
				uni.navigateTo({
					url: `../gogo/gogo`
				})
			},
			//添加购物车
			addCar() {
					let check = false;
					let checkIndex = -1;
					let cartList = [];
					const obj = uni.getStorageSync('cart_list');
					if (obj) {
						cartList = JSON.parse(obj);
						console.log(cartList);
					}
					for(let i=0;i<cartList.length;i++){
					  if(cartList[i].id === this.arr.id){
						check = true;
						checkIndex = i;
					  }
					}
					this.arr['num'] = this.payNum;
					if(check){
					  this.arr['num'] =  this.arr['num'] + cartList[checkIndex]['num'];//已存在购物车 数量+1
					  //先删除
					  cartList.splice(checkIndex,1);
					}
					cartList.unshift(this.arr);
					//存到缓存
					uni.setStorageSync('cart_list', JSON.stringify(cartList));
					uni.showToast({
						title: '加入购物车成功',
						icon: 'success',
					});
		},
	},
	onLoad(e) {
		this.arr = JSON.parse(e.arr);
		console.log(this.arr);
	}
	}
</script>

<style lang="scss" scoped>
	.contain {
		background-color: #f5f5f5;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 50px);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
		/* 兼容 iPhone X 及以上设备 */
	}

	.bg {
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.backgroundBanner {
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	swiper {
		height: 300px;
	}

	.banner {
		width: 100%;
		margin: 0 auto;
	}

	.banner img {
		width: 100%;
	}

	.productNameBox {
		display: flex;

		.productNameLeft {
			flex: 1;

			.productName {
				font-size: 16px;
				font-weight: 600;
				margin: 10px 10px 5px 10px;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
			}

			.productDes {
				font-size: 16px;
				margin: 0 10px 10px 10px;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 1; //行数
				line-clamp: 1;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
				color: #666;
			}
		}

		.share {
			height: 30px;
			line-height: 30px;
			margin-top: 20px;
			width: 60px;
			background-color: #f08902;
			border-bottom-left-radius: 10px;
			border-top-left-radius: 10px;
			display: flex;
			color: #ffffff;
			font-size: 14px;

			img {
				width: 20px;
				height: 20px;
				margin: 5px 5px 0 5px;
			}
		}
	}

	.priceBox {
		display: flex;
		margin-left: 10px;

		.unit {
			font-size: 14px
		}

		.price {
			color: red;
			font-weight: 600;
			font-size: 18px;
		}

		.priceOfVip {
			font-weight: 600;
			font-size: 18px;
			margin-left: 10px;
			text-decoration: line-through;
		}

		.vipTip {
			font-size: 14px;
			height: 25px;
			line-height: 25px;
			color: #ffffff;
			background-color: #2e434d;
			display: flex;
			margin: 0 10px 0 20px;
			padding: 0 5px;

			img {
				width: 16px;
				height: 16px;
				margin: 5px 5px 0 0;
			}
		}

		.integralTip {
			font-size: 14px;
			height: 25px;
			line-height: 25px;
			color: #e8a51f;
			border: 1px solid #e8a51f;
			padding: 0 5px;
		}

	}

	.openVip {
		height: 50px;
		display: flex;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		background-image: linear-gradient(to right, #eae0c7, #efe9bb);
		margin: 10px 10px;

		.left {
			line-height: 50px;
			flex: 1;

			img {
				width: 16px;
				height: 16px;
				margin: 5px 5px 0 5px;
			}
		}

		.right {
			width: 40px;
			background-color: #2e434d;
			padding: 5px 0 5px 7px;

			a {
				color: #ffffff;
				text-decoration: none;
			}
		}
	}

	.medium {
		.item {
			margin: 0 10px;
			display: flex;
			height: 50px;
			line-height: 50px;

			.title {
				font-size: 16px;
			}

			.content {
				flex: 1;
				font-size: 14px;
				color: #666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-left: 10px;
				display: flex;

				.contentTips {
					display: flex;
					font-size: 12px;
					margin-right: 10px;

					img {
						width: 20px;
						height: 20px;
						margin: 15px 0 0 0;
					}
				}
			}

			.rightNav {
				width: 30px;

				img {
					width: 26px;
					height: 26px;
					margin: 12px 5px 0 0;
				}
			}
		}

		.item:not(:last-child) {
			border-bottom: 1px solid #eee;
		}
	}

	.detal {
		img {
			width: 100%;
		}
	}

	.butBox {
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 99;
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容 iPhone X 及以上设备 */
		.pay {
			.left {
				flex: 1;
				display: flex;
			}

			.right {
				width: 200px;
				display: flex;
			}

			height: 50px;
			display: flex;

			.item {
				text-align: center;
				width: 55px;

				.imgBox img {
					width: 22px;
					height: 22px;
					margin-top: 3px;
				}

				.text {
					color: #666;
					font-size: 12px;
				}
			}

			.addCartBut {
				width: 50%;
				line-height: 50px;
				text-align: center;
				color: #ffffff;
				font-size: 16px;
				background-color: #e8a51f;
			}

			.addCartBut:hover {
				opacity: 0.5;
			}

			.payBut {
				width: 50%;
				line-height: 50px;
				text-align: center;
				color: #ffffff;
				font-size: 16px;
				background-color: RGB(244, 108, 108);
			}

			.payBut:hover {
				opacity: 0.5;
			}
		}
	}

	.payModal {
		position: fixed;
		z-index: 200;
		width: 100vw;
		height: auto;
		left: 0;
		bottom: 0;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容 iPhone X 及以上设备 */
		.top {

			height: 100px;
			display: flex;
			margin: 10px 0 0 10px;

			.hidden .typeItemActive {
				z-index: 5;
			}

			.hidden {
				z-index: 1;
				float: left;
				position: relative;
				overflow: hidden;
				width: 100px;
				height: 100px;

				img {
					position: absolute;
					width: 100px;
					height: 100px;
				}
			}

			.nameBox {
				flex: 1;

				.name {
					font-size: 16px;
					font-weight: 600;
					margin: 10px 10px 0 10px;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
				}

				.des {
					font-size: 14px;
					font-weight: 600;
					margin: 10px 10px 0 10px;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 1; //行数
					line-clamp: 1;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
					color: #666;
				}

				.priceActive {
					color: red;
					font-size: 16px;
					margin: 0 10px 0 10px;
					font-weight: bolder;
				}

				.originalPrice {
					color: #666;
					font-size: 14px;
					text-decoration: line-through;
				}
			}

			.close {
				float: right;
				width: 25px;
				height: 25px;
			}

			.close img {
				width: 25px;
				height: 25px;
			}
		}

		.type {
			margin: 0 10px 0 10px;

			.title {
				font-size: 14px;
				font-weight: 600;
				line-height: 30px;
			}

			.typeItemBox {
				display: flex;

				.typeItem {
					height: 30px;
					line-height: 30px;
					padding: 0 5px;
					border: 1px solid #eee;
					color: #666;
					margin-right: 5px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.typeItemActive {
					border: 1px solid #ee8216;
					color: #f08902;

				}
			}
		}
	}

	.payModalClose {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 199;
	}

	.bottom {
		margin-top: 10px;
		border-top: 1px solid #eee;
		background-color: #f5f5f5;

		.numBox {
			display: flex;
			margin: 10px 0 10px 10px;

			.but {
				height: 30px;
				width: 30px;
				line-height: 30px;
				border: 1px solid #dcdcdc;
				text-align: center;
				font-size: 16px;
			}

			input {
				width: 40px;
				height: 30px;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				text-align: center;
			}
		}

		.payBut {
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 16px;
			color: #ffffff;
			background-color: RGB(244, 108, 108);
			margin: 0 10px;
		}

		.payBut:hover {
			opacity: 0.5;
		}
	}
</style>